<script name="H5" setup>
import "@/utils/rem";
import { reactive, ref, onMounted } from "vue";
import { receiveFnc, getPhoneCode, linkVsFnc } from "@/api/phoneBill/receive";
// import { showToast } from "vant"
import { showToast } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
const link_verification = router.currentRoute.value.query.link_verification;
const DomFlag = ref(false)
const linkVs = () => {
  linkVsFnc(link_verification).then(res => {
    DomFlag.value = res
    if (!res) {
      showToast('该链接已经失效，请联系客服申请最新话费领取链接！')
      return false
    }
  })
}
linkVs()

const send = ref("获取验证码");
const btnFlag = ref(false);
const loading = ref(false);
const versions = ref('')
const num = ref('')
const formData = reactive({
  userName: "",
  phoneNumber: "",
});
/**获取手机验证码 */
const time = ref(60);
const codeTime = ref(false);

const getCode = () => {
  const reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;

  if (
    formData.userName &&
    formData.phoneNumber &&
    reg.test(formData.phoneNumber)
  ) {
    getPhoneCode({
      phoneNumber: formData.phoneNumber,
      userName: formData.userName,
    }).then((res) => {
      console.log(res.msg);
      if (res.code == 200) {
        codeTime.value = true;
        versions.value = res.data.versions
        num.value = res.data.num
        const timer = setInterval(() => {
          time.value--;
          if (time.value >= 0) {
            send.value = time.value + "s后刷新";
          } else if (time.value < 0) {
            send.value = "获取验证码";
            codeTime.value = false;
            clearInterval(timer);
            time.value = 60;
          }
        }, 1000);
      }
    });
  } else {
    showToast("请输入正确的手机号和用户名！");
  }
};

const getInfo = async () => {
  const PReg =
    //  /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
    /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  if (!formData.userName || !formData.phoneNumber || !formData.code) {
    showToast("领取人,领取手机号,验证码不能为空！");
    return false;
  }
  if (!PReg.test(formData.phoneNumber)) {
    showToast("手机号格式错误！");
    return false;
  }
  btnFlag.value = true;
  loading.value = true;

  await receiveFnc({
    userName: formData.userName,
    phoneNumber: formData.phoneNumber,
    code: formData.code,
    versions: versions.value,
    num: num.value,
  })
    .then((res) => {
      // console.log(res);
      showToast(res.msg);
      if (res.code == 200) {
        formData.userName = "";
        formData.phoneNumber = "";
      }
    })
    .catch(() => {
      btnFlag.value = false;
      loading.value = false;
    })
    .finally(() => {
      btnFlag.value = false;
      loading.value = false;
    });
};
const toSearch = () => {
  router.push(`/search`);
};
// md5.appendAsciiStr(`helloworld`)
onMounted(() => {
  document.title = "话费领取";
});

/**END */
</script>
<template>
  <div>
    <div v-if="DomFlag" style="max-width: 750px; margin: 0 auto" class="bg" v-loading="loading">
      <span class="receive-record" @click="toSearch">领取记录</span>
      <div class="form">
        <van-form>
          <van-cell-group inset>
            <van-field v-model="formData.userName" name="姓名" placeholder="请输入姓名" maxlength="15"
              left-icon="https://fx.yunyoutongxin.com/image/hfuser.png" />

            <van-field v-model="formData.phoneNumber" name="手机号" placeholder="请输入手机号" maxlength="11"
              left-icon="https://fx.yunyoutongxin.com/image/hfph.png" center>
              <template #button>
                <van-button @click="getCode" :disabled="codeTime" size="small" round color="#e3d3d3" type="primary"
                  style="color: #333">
                  {{ send }}</van-button>
              </template>
            </van-field>

            <van-field v-model="formData.code" name="验证码" placeholder="请输入验证码"
              left-icon="https://fx.yunyoutongxin.com/image/hfyz.png" maxlength="4" />
            <div style="margin-top: 0.1rem" @click="getInfo">
              <van-image width="100%" src="https://fx.yunyoutongxin.com/image/hfbtn.png" />
            </div>
          </van-cell-group>
        </van-form>
      </div>
    </div>
    <div v-else></div>
  </div>

</template>
<style lang="scss" scoped>
.form {
  width: 7rem;
  // height: 7rem;
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -3.5rem;
}

.bg {
  height: 17rem;
  background: url("https://fx.yunyoutongxin.com/image/hflq.jpg") no-repeat;
  background-size: 100% 100%;
}

.orderlist {
  p {
    font-size: 12px;
    line-height: 1.5em;
    padding-left: 0.4rem;
  }
}

.mb {
  margin-bottom: 0.1rem;
  padding: 0.2rem;
}

.receive-record {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2.666666666666667vmin 0 0 2.666666666666667vmin;
  color: #fff;
  font-family: PingFangSC-Regular, Source Han Sans CN;
  font-size: 3.2vmin;
  padding: 0.6666666666666667vmin 1.866666666666667vmin 0.6666666666666667vmin 2.9333333333333336vmin;
  right: 0;
  top: 4vmin;
}

:deep(.van-popup--center.van-popup--round) {
  width: 80%;
}

:deep(.van-cell-group) {
  background-color: transparent;
}

:deep(.van-cell) {
  margin-bottom: 16px;
  background-color: transparent;
  border: 2px solid #d59c99;
  border-radius: 30px;
}

:deep(.van-icon__image) {
  width: 30px;
  height: 30px;
}
</style>
